<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="utf-8">
    <title>菜谱表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/modules/css/search.css" media="all">

    <script src='/base/js/jquery-3.4.1.js'></script>
    <script src="/modules/js/app.js"></script>
</head>
<body>
<style>
    .layui-inline {
        width: 260px;
    }

    /* 设置数据表格行高 */
    .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }
</style>

<!-- 搜索 -->
<div class="searchTable">
    <div class="layui-inline">
        <label class="layui-form-label">菜名:</label>
        <div class="layui-input-block">
            <input type="text" id="title" name="title" placeholder="请输入菜谱标题..." autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">主分类:</label>
        <div class="layui-input-block">
            <input type="text" id="zid" name="zid" placeholder="请输入主分类..." autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">分类:</label>
        <div class="layui-input-block">
            <input type="text" id="cid" name="cid" placeholder="请输入分类..." autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">难度</label>
        <div class="layui-input-block">
            <input type="text" id="difficulty" name="difficulty" placeholder="请输入难度（0初级、1中级、3高级..." autocomplete="off" class="layui-input">
        </div>
    </div>


    <!-- <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button>-->
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload" style="margin-bottom: 8px">
            <i class="layui-icon layui-icon-search  layuiadmin-button-btn"></i>
        </button>
    </div>
</div>

<!-- 表格 -->
<table class="auth-table" id="auth-table" lay-filter="auth-table"></table>

<!-- 分页插件 -->
<div class="page-table" id="page-table"></div>

<!-- 多删除-添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

    // 接口
    let cpInfoFindPage = path + "/admin/caipu/cpInfo/findPage";        //查询-分页
    let cpInfoDel = path + "/admin/caipu/cpInfo/del";                  //删除

    // 路由
    let cpInfoPageAdd = "/page/modules_yw_caipu_cpInfo_cpInfoAdd";   //添加弹出
    let cpInfoPageUpd = "/page/modules_yw_caipu_cpInfo_cpInfoUpd";   //编辑弹出

    let table;     // 数据表格组件
    let laypage;   // 分页组件
    let res;       // 完整的后台数据
    var data;      // 当前行数据（弹出层时可直接parent.data获取）
    layui.use(['table', 'laypage'], function () {
        table = layui.table;
        laypage = layui.laypage;
        xijiaRenderTable();        //  数据表格 - 获取表格
        xijiaLayPage();            //  分页插件
        xijiaEventToolbar();       //  工具栏事件（多删除/添加）
        xijiaEventTool();          //  监听数据表格内按钮操作（编辑,删除等）
        xijiaEventSearch();        //  监听条件搜索
    });


    /**
     * 重载表格和加载表格
     * ---- getPage()= 获取 layui 当前分页参数 ===> 如：?current=1&size=10
     * ---- res = 后台返回的整个数据，整个页面可获取使用
     * @param params get请求的参数拼接
     *
     */
    function xijiaRenderTable(params) {
        res = Ajax.get(cpInfoFindPage + getPage() + xijiaSearchParam());
        table.render({
            elem: '#auth-table'
            , data: res.data.records
            , toolbar: '#toolbarDemo'
            , title: '菜谱表'
            , limit: res.data.size //显示的数量
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'}   //fixed: 'right', , fixed: 'left'

                    // {field: 'did', title: '源站原始id'},
                    {field: 'title', title: '菜名'},
                    {
                        field: 'thumb', title: '图片', templet: function (res) {
                            return "<img title='" + res.title + "'  src='" + res.thumb + "'  style='height: 50px;' onmouseover='viewImage(this,1)' onmouseout='viewImage(this,2)'>";
                        }
                    },
                    {field: 'zid', title: '主分类'},
                    {field: 'cid', title: '分类'},
                    //{field: 'thumb', title: '菜谱缩略图'},
                    // {field: 'videourl', title: '视频简绍'},
                    {field: 'desc', title: '菜谱简介'},
                    {field: 'difficulty', title: '难度（0初级、1中级、3高级'},
                    {field: 'costtime', title: '耗时'},
                    // {field: 'tip', title: '提示'},
                    // {field: 'yl', title: '材料'},
                    // {field: 'fl', title: '分量'},
                    // {field: 'steptext', title: '步骤'},
                    // {field: 'steppic', title: '步骤图片，用#符号分隔'},
                    {field: 'grade', title: '评分'},
                    {field: 'up', title: '多少人做过'},
                    {field: 'viewnum', title: '浏览数'},
                    {field: 'favnum', title: '收藏数'},
                    // {field: 'outdate', title: ''},
                    // {field: 'status', title: ''}
                    , {title: '操作', toolbar: '#barDemo', width: 250}
                ]
            ]
        });
    }


    /**
     * 分页配置, 数据总数会在下一次点击事更新上一次数据库的总数量
     * @author ws
     * @mail  1720696548@qq.com
     * @param result 后台返回数据, 用于第一此加载总数据
     * @date  2020/4/22 0022 1:18
     * @return
     */
    function xijiaLayPage() {
        laypage.render({
            // 注意，这里的 page-table 是 ID，不用加 # 号
            elem: 'page-table'
            , count: res.data.total    // 数据总数，从服务端得到
            , limit: res.data.size     // 每页数量
            // 基础信息配置
            , layout: pageJson.layout
            , curr: pageJson.curr
            , limits: pageJson.limits
            , groups: pageJson.groups
            , prev: pageJson.prev
            , next: pageJson.next
            // 监听 obj包含了当前分页的所有参数， 比如： obj.curr =当前页, obj.limit = 每页显示条数
            , jump: function (obj, first) {
                //首次不执行, 第一次加载时 first=true
                if (first) {
                    return;
                }
                // 刷新表格
                xijiaRenderTable();
            }
        });
    }


    /**
     * 工具栏事件（多删除 || 添加）  ==>> toolbar(auth-table): toolbar=监听表格头事件,  auth-table=数据表格elem 名称
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventToolbar() {
        table.on('toolbar(auth-table)', function (obj) {
            //添加
            if (obj.event === "add") {
                Pop.tipsWindown(cpInfoPageAdd, "65%", "800px", "添加");
            }
        });
    }

    /**
     * 监听数据表格内按钮（编辑 || 删除 || 其他）, tool(auth-table)==> tool =监听按钮， auth-table=数据表格elem对应值
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventTool() {
        table.on('tool(auth-table)', function (obj) {
            data = obj.data;  //当前行数据
            //编辑
            if (obj.event === 'edit') {
                Pop.tipsWindown(cpInfoPageUpd, "65%", "800px", "修改");
            }
            //删除
            if (obj.event === 'del') {
                let params = "?id=" + data.id;
                Pop.tipsDeleteId(cpInfoDel + params, obj);
            }
        });
    }

    /**
     * 条件搜索，重载数据
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventSearch() {
        let $ = layui.$, active = {
            //搜索
            reload: function () {
                // 重置到第一页
                $(".layui-laypage-skip .layui-input").val(1);
                // 重载-数据表格(带所有查询参数)
                xijiaRenderTable();
                // 重载后-刷新分页数据
                xijiaLayPage();
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }


    /**
     * 搜索参数
     * @author wangsong
     * @date 2020/8/23 0023 22:53
     * @return
     * @version 1.0.0
     */
    function xijiaSearchParam() {
        let params = "";
        params += "&cid=" + $("#cid").val();
        params += "&zid=" + $("#zid").val();
        params += "&title=" + $("#title").val();
        params += "&difficulty=" + $("#difficulty").val();

        return params;
    }

    /**
     * 鼠标移动到菜品上的展示
     * @author wangsong
     * @param null
     * @date 2020/10/4 0004 19:43
     * @return
     * @version 1.0.0
     */
    function viewImage(obj, type) {
        let html = "<img src='" + obj.src + "'  style='height: 400px;clear: both; display: block; margin: auto;' >";
        if (type === 1) {
            console.log("查看图片" + obj.src);
            layer.open({
                type: 1,
                title: '菜品：'+ obj.title,
                area: ["720px", "520px"],
                content: html,
                shadeClose: false,
                shade: 0
            })
        } else {
            console.log("关闭图片");
            layer.close(layer.index);
        }
    }
</script>
</body>
</html>
